{% extends "./runtime_base_list.html" %}
{% load admin_utils %}

{% block content_title %}SlugBuilder 管理{% endblock %}
{% block create_link %}{% url 'admin.slugbuilder.create' %}{% endblock %}
{% block delete_link %}{% url 'admin.slugbuilder.delete' %}{% endblock %}

{% block table-functional-area %}
<bk-button text icon="edit" @click="open(`{% url 'admin.slugbuilder.update' %}?id=${props.row.id}`, '_self')">编辑</bk-button>
<bk-button text icon="cog" @click="showBindBuildPackDialog(props.row)">绑定构建工具</bk-button>
<bk-button text style="color: red" @click="remove(props.row)" icon="delete">移除</bk-button>
{% endblock %}

{% block main_content_dialog %}
<bk-dialog v-model="dialog.visible" width="900"
    theme="primary"
    :mask-close="false"
    header-position="left"
    :confirm-fn="submitDialog"
    :title="dialog.title">
    <bk-form :label-width="95">
        <bk-form-item label="基础镜像: ">
            <span v-if="dialog.row">$[ dialog.row.display_name || dialog.row.name || dialog.image ]</span>
        </bk-form-item>
        <bk-form-item label="构建工具: ">
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="border: 1px solid #dcdee5; width: 335px;">
                    <div class="draggable-box-header"> 可选的构建工具 (共$[ unselectedBuildPack.length ]条)</div>
                    <div style="height: 320px; overflow: scroll;" class="beauty-scrollbar">
                        <draggable :list="unselectedBuildPack" group="buildpack" style="min-height: 320px;">
                            <div
                                class="draggable-content" style="line-height: 40px; "
                                :class="dialog.row.buildpacks.indexOf(element.id) === -1?'':'draggable-content-remove'"
                                v-for="(element, index) in unselectedBuildPack"
                                :key="element.id"
                            >
                                <span v-bk-tooltips="getBuildPackVisibleNameById(element.id)">
                                    $[ getBuildPackVisibleNameById(element.id) ]
                                </span>
                            </div>
                            <template slot="footer" key="footer">
                                <div v-if="unselectedBuildPack.length === 0" style="min-height: 0px;"></div>
                            </template>
                        </draggable>
                    </div>
                </div>
                <div style="width: 30px;height: 30px;background: url() no-repeat 50%;"></div>
                <div style="border: 1px solid #dcdee5; width: 335px;">
                    <div class="draggable-box-header"> 选中的构建工具 (共$[ selectedBuildPack.length ]条)</div>
                    <div style="height: 320px; overflow: scroll;" class="beauty-scrollbar">
                        <draggable :list="selectedBuildPack" group="buildpack" style="min-height: 320px;">
                            <div
                                class="draggable-content" style="line-height: 40px; "
                                :class="dialog.row.buildpacks.indexOf(element.id) !== -1?'':'draggable-content-new'"
                                v-for="(element, index) in selectedBuildPack"
                                :key="element.id"
                            >
                                <span v-bk-tooltips="getBuildPackVisibleNameById(element.id)">
                                    $[ getBuildPackVisibleNameById(element.id) ]
                                </span>
                            </div>
                            <template slot="footer" key="footer">
                                <div v-if="selectedBuildPack.length === 0" style="min-height: 0px;"></div>
                            </template>
                        </draggable>
                    </div>
                </div>
            </div>
        </bk-form-item>
    </bk-form>
</bk-dialog>
{% endblock %}


{% block main_script %}
{{ block.super }}
<script>
    const buildpacks = {{ buildpacks | to_json }}
    const URLRouter = {
        list: decodeURI("{% url 'admin.runtime.slugbuilder' %}"),
        create: decodeURI("{% url 'admin.runtime.slugbuilder' %}"),
        bind: decodeURI("{% url 'admin.runtime.slugbuilder.detail.bind' '${builder_id}' %}"),
        destroy: decodeURI("{% url 'admin.runtime.slugbuilder.detail' '${builder_id}' %}"),
    }

    ViewInstance = ViewInstance.extend({
        data () {
            return {
                dialog: {
                    visible: false,
                    title: '修改运行时配置',
                    row: undefined,
                    form: {

                    }
                },
                buildpacks,
                unselectedBuildPack: [],
                selectedBuildPack: []
            }
        },
        methods: {
            showBindBuildPackDialog: function (row) {
                this.updateDraggable(row)
                this.dialog.row = row
                this.dialog.visible = true
            },
            updateDraggable: function (builder) {
                this.unselectedBuildPack = Object.values(this.buildpacks).filter(item => builder.buildpacks.indexOf(item.id) === -1 && item.region === builder.region)
                this.selectedBuildPack = Object.values(this.buildpacks).filter(item => builder.buildpacks.indexOf(item.id) !== -1)
            },
            submitDialog: async function () {
                let url = URLRouter.bind.replace("${builder_id}", this.dialog.row.id)
                console.log("submit", this)
                try {
                    await this.$http.post(url, {
                        buildpack_id_list: this.selectedBuildPack.map(item => item.id)
                    })
                } finally {
                    let builders = (await this.$http.get(URLRouter.list)).results
                    this.data = builders
                }
                this.dialog.visible = false
            },
            getBuildPackVisibleNameById (bid) {
                const element = this.buildpacks[bid]
                if (element === undefined) {
                    return '--'
                } else {
                    if (element.display_name)
                        return `${element.display_name}(${element.name})`
                    return element.name || element.id
                }
            }
        }
    })
</script>

<style>

.draggable-box-header {
    background-color: #fafbfd;
    height: 38px;
    line-height: 38px;
    font-size: 12px;
    line-height: 40px; padding: 0 20px; border-bottom: 1px solid #dcdee5;
}

.draggable-content {
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    padding: 0px 20px;
    cursor: pointer;
}

.draggable-content:hover {
    background-color: #eef6fe;
    color: #3a84ff;
}

.draggable-content-new {
    background-color: #94f5a4;
    color: #3a84ff;
}

.draggable-content-new:hover {
    background-color: #45e35f;
    color: #3a84ff;
}

.draggable-content-remove {
    background-color: #fd9c9c;
    color: #3a84ff;
}

.draggable-content-remove:hover {
    background-color: #ff5656;
    color: #3a84ff;
}

.beauty-scrollbar::-webkit-scrollbar {
    width: 4px;
    background-color: hsla(0,0%,80%,0);
}

.beauty-scrollbar::-webkit-scrollbar-thumb {
    height: 5px;
    border-radius: 2px;
    background-color: #e6e9ea;
}
</style>
{% endblock %}
